<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园宝贝集市 - 修改密码</title>
    <link rel="stylesheet" href="styles.css">
</head>
<style>
    /* Resetting default browser styles */
    body, h1, h2, ul, li, p {
        margin: 0;
        padding: 0;
        
    }
    

    h2 {
        text-align: center;
    }
    /* Global styles */
    body {
		background-image: url('../static/images/经贸.png'); /* 替换 'background.jpg' 为你的背景图片路径 */

		background-size: cover;
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        color: #333;
    }
    
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    
    /* header {
        background-color: #007bff;
        color: #fff;
        padding: 20px;
    } */
    
    /* header h1 {
        font-size: 28px;
        margin-bottom: 10px;
    } */
    
    nav ul {
        list-style-type: none;
    }
    
    nav ul li {
        display: inline;
        margin-right: 20px;
    }
    
    nav ul li a {
        color: #fff;
        text-decoration: none;
    }
    
    main {
        padding: 20px;
        width: 50%; /* 设置盒子宽度 */
        margin: 0 auto; /* 设置左右外边距为auto，使其水平居中 */
		margin-top: 10%;
    }
    
    .password-change {
        width: 50%;
        background-color: #fec;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		margin: 0 auto
		
		
    }
	.password-change h2{
		font-size: 50px;
	}
    
    .form-group {
        margin-bottom: 15px;
		padding-top: 20px;
    }
    
    label {
        display: block;
        font-weight: bold;
		font-size: 20px;
        /* float: left; */
    }
    
	input[type="username"]{
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-sizing: border-box;
	}
    input[type="password"] {
        /* float: right; */
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }
    
    button[type="submit"] {
        background-color: #007bff;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
    }
    
    button[type="submit"]:hover {
        background-color: #0056b3;
    }
    
    footer {
        text-align: center;
        margin-top: 20px;
        padding: 10px 0;
        background-color: #007bff;
        color: #fff;
    }
	.link {
		padding-top: 30px;
	    text-align: center;
	    margin-top: 10px;
	}
</style>
<body>
    <!-- <header>
        <h1>校园宝贝集市</h1>
        <nav>
            <ul>
                <li><a href="/login">登录</a></li>
                <li><a href="/registration">注册</a></li>
            </ul>
        </nav>
    </header> -->

    <main>
        <section class="password-change">
            <h2>修改密码</h2>
            <form id="passwordChangeForm" action="password_change_process.php" method="POST">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="username" id="username" name="username" placeholder="请输入用户名" required>
                </div>
                <div class="form-group">
                    <label for="currentPassword">旧密码：</label>
                    <input type="password" id="currentPassword" name="currentPassword" placeholder="请输入旧密码" required>
                </div>

                <div class="form-group">
                    <label for="newPassword">新密码：</label>
                    <input type="password" id="newPassword" name="newPassword" placeholder="请输入旧密码" required>
                </div>

                <div class="form-group">
                    <label for="confirmNewPassword">确认新密码：</label>
                    <input type="password" id="confirmNewPassword" name="confirmNewPassword" placeholder="请再次输入新密码" required>
                </div>

                <button type="submit">确认修改</button>
            </form>
			<div class="link">
			    <a href="register.html" id="registerLink">注册</a> | 
			    <a href="#" id="forgotPasswordLink">登录</a> |
			    <a href="./ChangePassword.html" id="tttPasswordLink">忘记密码</a>
			</div>
        </section>
    </main>

    <!-- <footer>
        <p>&copy; 2024 校园宝贝集市</p>
    </footer> -->

    <!-- <script>
        document.addEventListener("DOMContentLoaded", function() {
            var passwordChangeForm = document.getElementById("passwordChangeForm");

            passwordChangeForm.addEventListener("submit", function(event) {
                var currentPassword = document.getElementById("currentPassword").value;
                var newPassword = document.getElementById("newPassword").value;
                var confirmNewPassword = document.getElementById("confirmNewPassword").value;

                // Perform validation here, for simplicity, let's assume all fields are required
                if (!currentPassword || !newPassword || !confirmNewPassword) {
                    event.preventDefault(); // Prevent form submission
                    alert("请填写所有必填字段！");
                } else if (newPassword !== confirmNewPassword) {
                    event.preventDefault(); // Prevent form submission
                    alert("新密码和确认新密码不匹配！");
                } else {
                    // Continue with form submission
                }
            });
        });
    </script> -->
</body>
</html>
